<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>查询报价</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <!--<link href="css/nprogress.css" rel="stylesheet">-->
    <!-- FullCalendar -->
    <link href="css/fullcalendar.min.css" rel="stylesheet">
    <link href="css/fullcalendar.print.css" rel="stylesheet" media="print">
    <style>

        #bbb{
            margin: 2px 90px;
            float: left;
            display: none;
        }
    </style>


    <!-- Custom styling plus plugins -->
    <link href="css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div id="head">

        </div>



        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left" style="margin-bottom: 20px;">
                        <h3 style="color: green;">价格查询</h3>
                        <hr />
                    </div>

                    <div style="float: left;margin: 0 auto;margin-left: 300px;margin-bottom: 35px;">
                        <form style="font-size: 15px;">

                            <input type="text" id="destination" placeholder="目的地,例如:德国" style="width: 200px;height: 40px;"/>
                            <input type="text" placeholder="物品重量(KG)" id="height" style="width: 200px;height: 40px;margin-top: 20px;"/>
                            <select style="width: 100px;height: 40px;margin-top: 20px;" id="tran">
                                <option value="0">未选择</option>
                                <option value="1">海运</option>
                                <option value="2">空运</option>
                            </select>
                            <div style="display: inline-block;">
                                <button type="button" class="btn btn-info page1" style="margin-left: 20px;">开始查询</button>
                                <button type="button" id="gujia" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">在线估价</button>
                                <!-- 1111 -->
                                <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" >
                                    <div class="modal-dialog modal-sm ">
                                        <div class="modal-content">

                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel2">估价窗口</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="item form-group" id="jiageck">

                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!-- 1111 -->
                                <span id="gujiaError" style="display:none;color:red"></span>
                            </div>
                        </form>
                    </div>

                </div>

                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="x_panel">
                            <div class="x_title">



                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">


                                <!-- start project list -->
                                <table id="table1" class="table table-striped projects">
                                    <thead>
                                    <tr>
                                        <th style="width: 8%">目的地</th>
                                        <th style="width: 8%">每KG价格</th>
                                        <th style="width: 10%">燃油附加费()</th>
                                        <th style="width: 18%">计算公式</th>
                                        <th style="width: 6%">运输方式</th>
                                        <th style="width: 10%">操作</th>
                                    </tr>
                                    </thead>

                                </table>
                                <!-- end project list -->
                                <span id="tableError" style="display: none;color: red;font-size: 20px;margin-left:550px"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /page content -->
            <div class="pull-right" style="margin-top: 38px;">
                <ul class="pagination" id="ye">

                </ul>
            </div>
            <!-- footer content -->

            <!-- /footer content -->
        </div>
    </div>

    <!-- calendar modal -->
    <div id="CalenderModalNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">New Calendar Entry</h4>
                </div>
                <div class="modal-body">
                    <div id="testmodal" style="padding: 5px 20px;">
                        <form id="antoform" class="form-horizontal calender" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Title</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="title" name="title">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Description</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" style="height:55px;" id="descr" name="descr"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default antoclose" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary antosubmit">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div id="CalenderModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel23">Edit Calendar Entry</h4>
                </div>
                <div class="modal-body">

                    <div id="testmodal2" style="padding: 5px 20px;">
                        <form id="antoform2" class="form-horizontal calender" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Title</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="title2" name="title2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Description</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" style="height:55px;" id="descr2" name="descr"></textarea>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default antoclose2" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary antosubmit2">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="fc_create" data-toggle="modal" data-target="#CalenderModalNew"></div>
<div id="fc_edit" data-toggle="modal" data-target="#CalenderModalEdit"></div>
<!-- /calendar modal -->

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- FullCalendar -->
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/icheck.min.js"></script>

<!-- Custom Theme Scripts -->
<!--<script src="js/custom.min.js"></script>-->

<style >
    .checkbox-custom {
        position: relative;
        padding: 0 15px 0 25px;
        margin-bottom: 7px;
        margin-top: 0;
        display: inline-block;
    }
    /*
    将初始的checkbox的样式改变
    */
    .checkbox-custom input[type="checkbox"] {
        opacity: 0;/*将初始的checkbox隐藏起来*/
        position: absolute;
        cursor: pointer;
        z-index: 2;
        margin: -6px 0 0 0;
        top: 50%;
        left: 3px;
    }
    /*
    设计新的checkbox，位置
    */
    .checkbox-custom label:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -9px;
        width: 19px;
        height: 18px;
        display: inline-block;
        border-radius: 2px;
        border: 1px solid #bbb;
        background: #eee;
    }
    /*
    点击初始的checkbox，将新的checkbox关联起来
    */
    .checkbox-custom input[type="checkbox"]:checked +label:after {
        position: absolute;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        content: "\e013";
        top: 48%;
        left: 4px;
        margin-top: -5px;
        font-size: 11px;
        line-height: 1;
        width: 16px;
        height: 16px;
        color: #333;
    }
    .checkbox-custom label {
        cursor: pointer;
        line-height: 1.2;
        font-weight: normal;/*改变了rememberme的字体*/
        margin-bottom: 0;
        text-align: left;
    }

</style>
<!-- FullCalendar -->
<script>
    var $token=window.sessionStorage.getItem('token');
    $.ajax({
        type:"post",
        xhrFields:{withCredentials:true},
        url:"http://localhost:8081/money/selectquote",
        dataType:"json",
        data:{"Destination":$("#destination").val(),"tranNo":$("#tran").val(),"token":$token},
        success:function (data) {
            if(data.list==0){
                $("#table1").hide();
                $("#tableError").show();
                $("#tableError").html("抱歉,未找到数据");
                return;
            }
            $("#tableError").hide();
            $("#table1").show();
            $('#table1 tbody').remove();
            $.each(data.list,function(i,terms) {
                var $tr = $('<tr></tr>');

                var $td = $('<td></td>');
                $td.text(terms.destination);
                $tr.append($td);

                $td = $('<td></td>');
                $td.text(terms.unitprice);
                $tr.append($td);

                $td = $('<td></td>');
                $td.text(terms.fuel);
                $tr.append($td);

                $td = $('<td></td>');
                $td.text("(物品重量*每KG重量)/燃油附加费");
                $tr.append($td);


                $td = $('<td></td>');
                if (terms.tranno==1){
                    $td.text("海运");
                } else {
                    $td.text("空运");
                }
                $tr.append($td);



                $td = $('<td></td>');
                $td.html('<a href="Generate_order.html" class="btn btn-success btn-xs" style="padding: 2px 8px;">立即下单</a>');
                $tr.append($td);
                $('#table1').append($tr);

            })

            $('#ye').prepend('<li><a class="page1" href="javascript:;" pageNum="'+(data.pageNum-1)+'" >&laquo;</a></li >');
            $("#ye").append('<li><a>'+data.pageNum+"/"+data.pages+'</a></li>');
            $('#ye').append('<li><a class="page1" href="javascript:;" pageNum="'+(data.pageNum+1)+'">&raquo;</a></li>');
        },
        error:function(){
            alert("错误");
        }
    })
    <!--end页面初始化ajax-->



    $(window).load(function() {
        $("#head").load("head.html");
        $(".jiageck").css("display","none");
        var date = new Date(),
            d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear(),
            started,
            categoryClass;

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                $('#fc_create').click();

                started = start;
                ended = end;

                $(".antosubmit").on("click", function() {
                    var title = $("#title").val();
                    if (end) {
                        ended = end;
                    }

                    categoryClass = $("#event_type").val();

                    if (title) {
                        calendar.fullCalendar('renderEvent', {
                                title: title,
                                start: started,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                        );
                    }

                    $('#title').val('');

                    calendar.fullCalendar('unselect');

                    $('.antoclose').click();

                    return false;
                });
            },
            eventClick: function(calEvent, jsEvent, view) {
                $('#fc_edit').click();
                $('#title2').val(calEvent.title);

                categoryClass = $("#event_type").val();

                $(".antosubmit2").on("click", function() {
                    calEvent.title = $("#title2").val();

                    calendar.fullCalendar('updateEvent', calEvent);
                    $('.antoclose2').click();
                });

                calendar.fullCalendar('unselect');
            },
            editable: true,
            events: [{
                title: 'All Day Event',
                start: new Date(y, m, 1)
            }, {
                title: 'Long Event',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            }, {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            }, {
                title: 'Lunch',
                start: new Date(y, m, d + 14, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            }, {
                title: 'Birthday Party',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
                allDay: false
            }, {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }]
        });
    });
    $(document).on("click",".page1",function () {
        var $pagenum=$(this).attr("pagenum");
        $.ajax({
            type:"post",
            xhrFields:{withCredentials:true},
            url:"http://localhost:8081/money/selectquote",
            dataType:"json",
            data:{"Destination":$("#destination").val(),"tranNo":$("#tran").val(),"pageNum":$pagenum,"token":$token},
            success:function (data) {
                if(data.list==0){
                    $("#table1").hide();
                    $("#tableError").show();
                    $("#tableError").html("抱歉,未找到数据");
                    return;
                }
                $("#tableError").hide();
                $("#table1").show();
                $('#table1 tbody').remove();
                $.each(data.list,function(i,terms) {
                    var $tr = $('<tr></tr>');

                    var $td = $('<td></td>');
                    $td.text(terms.destination);
                    $tr.append($td);

                    $td = $('<td></td>');
                    $td.text(terms.unitprice);
                    $tr.append($td);

                    $td = $('<td></td>');
                    $td.text(terms.fuel);
                    $tr.append($td);

                    $td = $('<td></td>');
                    $td.text("(物品重量*每KG重量)/燃油附加费");
                    $tr.append($td);

                    $td = $('<td></td>');
                    if(terms.tranno==1){
                        $td.text("海运");
                    }else {
                        $td.text("空运");
                    }

                    $tr.append($td);



                    $td = $('<td></td>');
                    $td.html('<a href="Generate_order.html" class="btn btn-success btn-xs" style="padding: 2px 8px;">立即下单</a>');
                    $tr.append($td);
                    $('#table1').append($tr);

                })
                $('#ye').find("li").remove();
                $('#ye').prepend('<li><a class="page1" href="javascript:;" pageNum="'+(data.pageNum-1)+'" >&laquo;</a></li >');
                $("#ye").append('<li><a>'+data.pageNum+"/"+data.pages+'</a></li>');
                $('#ye').append('<li><a class="page1" href="javascript:;" pageNum="'+(data.pageNum+1)+'">&raquo;</a></li>');
            },
            error:function(){
                alert("错误");
            }
        })
    })
    var flag = true;
    $("#gujia").click(function () {
        var $destination=$("#destination").val();
        var $height=$("#height").val();
        var $tran=$("#tran").val();
        var weightReg = /^(0(\.\d{1}){0,1}|[1-8]\d{1,3}(\.\d{1}){0,1}|9\d{1,2}(\.\d{1}){0,1}|999(\.0){0,1}|.{0})$/;
        if ($destination == "") {
            $("#jiageck").html("请输入目的地").css("color","red");
            return;
        }else if ($height == ""||!(weightReg.test($height))) {
            $("#jiageck").html("请输入正确的物品重量").css("color","red");
            return;
        }else if ($tran == 0) {
            $("#jiageck").html("请选择正确的运输方式").css("color","red");
            return;
        }else {
            $.ajax({
                type:"post",
                xhrFields:{withCredentials:true},
                url:"http://localhost:8081/money/gujia",
                dataType:"json",
                data:{"Destination":$destination,"tranNo":$tran,"height":$height,"token":$token},
                success:function(data) {
                    if(data.message!="no"){
                        $("#jiageck").html('预计价格为：<span id="jiage"></span>RMB');
                        $("#jiageck").css("color","black");
                        $("#jiage").html(data.message);
                    }else{
                        $("#jiageck").html("请输入正确的目的地").css("color","red");

                    }
                },
                error:function(){
                    alert("错误");
                }
            });
        }
    });
</script>
<!-- /FullCalendar -->

</body>
</html>
